<template>
  <div class="entInfo" style="width: 90%;margin: auto">
    <div style="line-height: 50px; font-size: 30px; color: dodgerblue; margin: 20px auto 0 auto;">修改企业基本信息</div>
    <div style="background: #eeeeee;padding: 20px;margin-top: 30px">
      <div style="width: 74%;margin: auto;background: #ffffff;padding: 20px;">
        <el-form
          ref="workstationForm"
          :model="workstationForm"
          :rules="rules"
          label-width="150px"
        >
          <div class="title2">企业信息</div>
          <el-form-item label="企业名称" prop="entName">
            <el-input v-model="workstationForm.entName" placeholder="请填写企业名称" />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item class="el220" label="统一社会信用代码" prop="entCode">
                <el-input v-model="workstationForm.entCode" placeholder="请填写统一社会信用代码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="el220" label="法人代表" prop="legalPerson">
                <el-input v-model="workstationForm.legalPerson" placeholder="请填写统法人代表" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="企业注册地" prop="areaSelect1">
            <area-select
              :area-num="workstationForm.provCode"
              :area-name="workstationForm.provName"
              :city-num="workstationForm.cityCode"
              :city-name="workstationForm.cityName"
              :dist-num="workstationForm.distCode"
              placeholder="请选择企业注册地"
              @getAreaSelect="getAreaSelect2"
            />
          </el-form-item>
          <el-form-item label="注册地址" prop="regAddress">
            <el-input v-model="workstationForm.regAddress" placeholder="请填写注册地址" />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item class="el220" label="注册时间" prop="regTime">
                <el-date-picker
                  v-model="workstationForm.regTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="el220" label="注册资本(万元)" prop="regCapital">
                <el-input
                  v-model="workstationForm.regCapital"
                  placeholder="请填写注册资本"
                  oninput="value=value.replace(/[^\d.]/g, '')"
                  @keydown.native="handleInput2"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="所属行业" prop="industry">
            <el-cascader
              v-model="workstationForm.industry"
              size="large"
              :options="categoryData"
              clearable
              style="width: 100%;"
            />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item class="el220" label="企业类型" prop="entType">
                <el-select v-model="workstationForm.entType" placeholder="请选择企业类型" value-key="stationTypeCode" @change="getTeacherId()">
                  <el-option
                    v-for="(item,i) in stationTypeList"
                    :key="i"
                    :label="item.stationTypeName"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="el220" label="企业规模" prop="entScale">
                <el-select v-model="workstationForm.entScale" placeholder="请选择企业规模" value-key="scaleTypeCode" @change="getTeacherId()">
                  <el-option
                    v-for="(item,i) in scaleTypeList"
                    :key="i"
                    :label="item.scaleTypeName"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item class="el220" label="生产经营年限" prop="operationLife">
                <el-input v-model="workstationForm.operationLife" placeholder="请填写生产经营年限" @input="replaceNum(workstationForm.operationLife)" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="el220" label="全职员工数量" prop="entNumber">
                <el-input v-model="workstationForm.entNumber" placeholder="请填写全职员工数量" @input="replaceNum1(workstationForm.entNumber)" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item class="xjr" label="与现有“小巨人”企业存在控股关系" prop="entHolding">
            <el-radio-group v-model="workstationForm.entHolding">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="xjr" label="同集团内有其他生产相似主导产品企业获得认定或申报" prop="entSimilar">
            <el-radio-group v-model="workstationForm.entSimilar">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item class="el220" label="联系人姓名" prop="contactsName">
                <el-input v-model="workstationForm.contactsName" placeholder="请填写联系人姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="el220" label="联系人电话" prop="contactsTel">
                <el-input v-model="workstationForm.contactsTel" placeholder="请填固定电话，例如：010-82292071" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item class="el220" label="联系人手机" prop="contactsMobile">
                <el-input v-model="workstationForm.contactsMobile" placeholder="请填写联系人手机号码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="el220" label="电子邮箱" prop="email">
                <el-input v-model="workstationForm.email" placeholder="请填写电子邮件，例如abc@sme.cn" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item class="el220" label="邮编" prop="postalCode">
                <el-input v-model="workstationForm.postalCode" placeholder="请填写邮编" />
              </el-form-item>
            </el-col>
            <el-col :span="12" />
          </el-row>
          <el-form-item label="通讯地址" prop="commAddress">
            <el-input v-model="workstationForm.commAddress" placeholder="请填写通讯地址" />
          </el-form-item>
          <el-form-item label="经营范围" prop="businessScope">
            <el-input v-model="workstationForm.businessScope" :rows="6" type="textarea" placeholder="请填写经营范围" maxlength="200" show-word-limit />
          </el-form-item>
          <el-form-item class="shangxia1">
            <el-button :loading="loading" type="primary" @click="saveForm()">保存</el-button>
            <el-button :loading="loading" type="primary" @click="submitForm('workstationForm')">提交</el-button>
            <el-button type="primary" @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getIndustry, getAreasOfExpertise, getStationType, getScaleType } from '@/utils/dictionary'
import AreaSelect from '@/components/AreaSelect'
import { update, find, save } from '@/api/base'
import { categoryData, CodeToText, TextToCode } from '@/utils/app.js'
export default {
  name: 'WorkstationInfo',
  components: {
    AreaSelect
  },
  data() {
    const validateEntCode = (rule, value, callback) => {
      const regMobile = /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g
      if (!value) {
        callback(new Error('请填统一社会信用代码'))
      } else if (value.length < 18) {
        callback(new Error('请填统一社会信用代码'))
      } else if (!regMobile.test(value)) {
        callback(new Error('请填写正确统一社会信用代码'))
      } else {
        callback()
      }
    }
    const validateNum = (rule, value, callback) => {
      const regNum = /(^[0-9]\d*$)/
      console.log(value)
      if (!value) {
        callback(new Error('请填写人员数量'))
      } else if (value.length > 4) {
        callback(new Error('请填写人数最多9999'))
      } else if (!regNum.test(value)) {
        callback(new Error('请填写正确人数'))
      } else if (value < 10) {
        callback(new Error('请填写10或10以上人数'))
      }
      callback()
    }
    const validateAreaSelect1 = (rule, value, callback) => {
      if (!this.workstationForm.areaSelect1) {
        return callback(new Error('请选择地区'))
      }
      callback()
    }
    const validateIndustry = (rule, value, callback) => {
      if (this.workstationForm.industry.length === 0) {
        return callback(new Error('请选择行业领域'))
      }
      callback()
    }
    const validateIndustry1 = (rule, value, callback) => {
      if (this.workstationForm.industry1.length === 0) {
        return callback(new Error('请选择行业领域'))
      }
      callback()
    }
    const validateTel = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请填写联系电话'))
      } else if (value.length < 7) {
        callback(new Error('请填写联系电话'))
      } else {
        callback()
      }
    }
    const validateMobile = (rule, value, callback) => {
      const regMobile = /^1[3|4|5|6|7|8|9][0-9]{9}$/ // /^1(3\d|4[5-8]|5[0-35-9]|6[567]|7[01345-8]|8\d|9[025-9])\d{8}$/
      if (!value) {
        callback(new Error('请填写手机号码'))
      } else if (value.length < 11) {
        callback(new Error('请填写手机号码'))
      } else if (!regMobile.test(value)) {
        callback(new Error('请填写正确手机号'))
      } else {
        callback()
      }
    }
    const validateAreasOfExpertise = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请选择至少1项'))
      } else if (value.length < 1) {
        callback(new Error('请选择至少1项'))
      } else {
        callback()
      }
    }
    const validateEmail = (rule, value, callback) => {
      // const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      const regEmail = /^[a-z0-9]+([._\\-]*[a-z0-9])+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!value) {
        callback(new Error('请填写邮箱'))
      } else if (value.length < 1) {
        callback(new Error('请填写邮箱'))
      } else if (!regEmail.test(value)) {
        callback(new Error('请填写正确邮箱'))
      } else {
        callback()
      }
    }
    const validateRegCapital = (rule, value, callback) => {
      if (this.workstationForm.regCapital === undefined || this.workstationForm.regCapital === '') {
        callback(new Error('请填写'))
      } else if (this.workstationForm.regCapital > 99999999999999) {
        callback(new Error('最多14个字符'))
      }
      callback()
    }
    return {
      loading: false,
      accept: false,
      centerDialogVisible: false,
      isDisabled: false,
      modalKey: 0,
      workstationForm: {
        entName: '',
        entCode: '',
        legalPerson: '',
        provCode: '',
        provName: '',
        cityCode: '',
        cityName: '',
        distCode: '',
        distName: '',
        regAddress: '',
        regTime: '',
        regCapital: 0,
        industryCode: '',
        industryName: '',
        industrySecondCode: '',
        industrySecondName: '',
        industryThreeCode: '',
        industryThreeName: '',
        industryFourthCode: '',
        industryFourthName: '',
        entTypeCode: '',
        entTypeName: '',
        entScaleCode: '',
        entScaleName: '',
        entNumber: 0,
        operationLife: 0,
        entHolding: '',
        entSimilar: '',
        contactsName: '',
        contactsTel: '',
        contactsMobile: '',
        commAddress: '',
        businessScope: '',
        email: '',
        postalCode: '',
        name: '',
        regDate: '',
        areasOfExpertise: [],
        industry: [],
        industry1: []
      },
      rules: {
        entName: [
          { required: true, message: '请填写企业名', trigger: 'change' },
          { min: 1, max: 30, message: '最多录入30个字符', trigger: 'change' }
        ],
        entCode: [
          { required: true, trigger: 'change', validator: validateEntCode }
        ],
        legalPerson: [
          { required: true, message: '请填写法人姓名', trigger: 'change' },
          { min: 1, max: 30, message: '最多录入30个字符', trigger: 'change' }
        ],
        entType: [
          { required: true, message: '请选择企业类型', trigger: 'change' }
        ],
        regTime: [
          { required: true, message: '请选择发布时间', trigger: 'change' }
        ],
        regCapital: [
          { required: true, trigger: 'change', validator: validateRegCapital }
        ],
        contactsName: [
          { required: true, message: '请填写联系人姓名', trigger: 'change' },
          { min: 1, max: 15, message: '最多录入15个字符', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请填写详细地址', trigger: 'change' },
          { min: 1, max: 50, message: '最多录入50个字符', trigger: 'change' }
        ],
        entScale: [
          { required: true, message: '请选择企业规模', trigger: 'change' }
        ],
        operationLife: [
          { required: true, max: 3, message: '请填写生产经营年限最大3位', trigger: 'change' }
        ],
        entNumber: [
          { required: true, max: 10, message: '请填写全职员工数量最大10位', trigger: 'change' }
        ],
        entHolding: [
          { required: true, message: '请选择与现有“小巨人”企业存在控股关系', trigger: 'change' }
        ],
        entSimilar: [
          { required: true, message: '请选择同集团内有其他生产相似主导产品企业获得认定或申报', trigger: 'change' }
        ],
        contactsTel: [
          { required: true, trigger: 'change', validator: validateTel }
        ],
        contactsMobile: [
          { required: true, trigger: 'change', validator: validateMobile }
        ],
        email: [
          { required: true, trigger: 'change', validator: validateEmail }
        ],
        scaleType: [
          { required: true, trigger: 'change', validator: validateNum }
        ],
        areaSelect1: [
          { required: true, trigger: 'change', validator: validateAreaSelect1 }
        ],
        areasOfExpertise: [
          { type: 'array', required: true, trigger: 'change', validator: validateAreasOfExpertise }
        ],
        industry: [
          { type: 'array', required: true, trigger: 'change', validator: validateIndustry }
        ],
        industry1: [
          { type: 'array', required: true, trigger: 'change', validator: validateIndustry1 }
        ],
        postalCode: [
          { required: true, message: '请填写详邮编', trigger: 'change' },
          { min: 1, max: 6, message: '最多录入6个字符', trigger: 'change' }
        ],
        commAddress: [
          { required: true, message: '请填写详细地址', trigger: 'change' },
          { min: 1, max: 50, message: '最多录入50个字符', trigger: 'change' }
        ],
        businessScope: [
          { required: true, message: '请填写经营范围', trigger: 'change' },
          { min: 1, max: 200, message: '最多录入200个字符', trigger: 'change' }
        ],
        regAddress: [
          { required: true, message: '请填写注册地址', trigger: 'change' },
          { min: 1, max: 50, message: '最多录入50个字符', trigger: 'change' }
        ]

      },
      industryList: getIndustry(),
      areasOfExpertiseList: getAreasOfExpertise(),
      stationTypeList: getStationType(),
      scaleTypeList: getScaleType(),
      userInfoForm: [],
      CodeToText,
      TextToCode,
      categoryData
    }
  },
  created() {
    this.getDate()
  },
  methods: {
    saveForm() {
      console.log(this.workstationForm.areaSelect1)
      console.log(this.workstationForm.industry)
      if (this.workstationForm.areaSelect1 !== undefined) {
        this.workstationForm.provCode = this.workstationForm.areaSelect1.areaCode
        this.workstationForm.provName = this.workstationForm.areaSelect1.areaName
        this.workstationForm.cityCode = this.workstationForm.areaSelect1.cityCode
        this.workstationForm.cityName = this.workstationForm.areaSelect1.cityName
        this.workstationForm.distCode = this.workstationForm.areaSelect1.distCode
        this.workstationForm.distName = this.workstationForm.areaSelect1.distName
      }
      if (this.workstationForm.industry.length > 0) {
        this.workstationForm.industryCode = this.workstationForm.industry[0]
        this.workstationForm.industryName = CodeToText[this.workstationForm.industry[0]]
        this.workstationForm.industrySecondCode = this.workstationForm.industry[1]
        this.workstationForm.industrySecondName = CodeToText[this.workstationForm.industry[1]]
        this.workstationForm.industryThreeCode = this.workstationForm.industry[2]
        this.workstationForm.industryThreeName = CodeToText[this.workstationForm.industry[2]]
        if (this.workstationForm.industry[3]) {
          this.workstationForm.industryFourthCode = this.workstationForm.industry[3]
          this.workstationForm.industryFourthName = CodeToText[this.workstationForm.industry[3]]
        } else {
          this.workstationForm.industryFourthCode = this.workstationForm.industry[2] + '0'
          this.workstationForm.industryFourthName = CodeToText[this.workstationForm.industry[2]]
        }
      }
      if (this.workstationForm.entType !== undefined) {
        this.workstationForm.entTypeCode = this.workstationForm.entType.stationTypeCode
        this.workstationForm.entTypeName = this.workstationForm.entType.stationTypeName
      }
      if (this.workstationForm.entScale !== undefined) {
        this.workstationForm.entScaleCode = this.workstationForm.entScale.scaleTypeCode
        this.workstationForm.entScaleName = this.workstationForm.entScale.scaleTypeName
      }
      this.loading = true
      save(this.workstationForm).then(response => {
        if (response.result === 1) {
          this.$message({
            message: '保存成功', type: 'success'
          })
          this.loading = false
        } else if (response.result === 0) {
          this.$message({
            message: response.msg, type: 'warning'
          })
          this.loading = false
        } else {
          this.$message({
            message: '保存失败', type: 'warning'
          })
          this.loading = false
        }
      }).catch(() => {
        this.$message({
          message: '保存失败', type: 'warning'
        })
        this.loading = false
      })
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.workstationForm.provCode = this.workstationForm.areaSelect1.areaCode
          this.workstationForm.provName = this.workstationForm.areaSelect1.areaName
          this.workstationForm.cityCode = this.workstationForm.areaSelect1.cityCode
          this.workstationForm.cityName = this.workstationForm.areaSelect1.cityName
          this.workstationForm.distCode = this.workstationForm.areaSelect1.distCode
          this.workstationForm.distName = this.workstationForm.areaSelect1.distName
          this.workstationForm.industryCode = this.workstationForm.industry[0]
          this.workstationForm.industryName = CodeToText[this.workstationForm.industry[0]]
          this.workstationForm.industrySecondCode = this.workstationForm.industry[1]
          this.workstationForm.industrySecondName = CodeToText[this.workstationForm.industry[1]]
          this.workstationForm.industryThreeCode = this.workstationForm.industry[2]
          this.workstationForm.industryThreeName = CodeToText[this.workstationForm.industry[2]]
          if (this.workstationForm.industry[3]) {
            this.workstationForm.industryFourthCode = this.workstationForm.industry[3]
            this.workstationForm.industryFourthName = CodeToText[this.workstationForm.industry[3]]
          } else {
            this.workstationForm.industryFourthCode = this.workstationForm.industry[2] + '0'
            this.workstationForm.industryFourthName = CodeToText[this.workstationForm.industry[2]]
          }
          this.workstationForm.entTypeCode = this.workstationForm.entType.stationTypeCode
          this.workstationForm.entTypeName = this.workstationForm.entType.stationTypeName
          this.workstationForm.entScaleCode = this.workstationForm.entScale.scaleTypeCode
          this.workstationForm.entScaleName = this.workstationForm.entScale.scaleTypeName
          const that = this
          this.loading = true
          update(that.workstationForm).then(response => {
            if (response.result === 0) {
              this.$message({
                message: response.msg, type: 'error'
              })
            } else if (response.result === 1) {
              this.$message({
                message: '企业基本信息提交成功', type: 'success'
              })
              this.loading = false
              this.$router.push('/base/index')
            } else {
              this.$message({
                message: '企业基本信息提交失败', type: 'warning'
              })
              this.loading = false
            }
          }).catch(() => {
            this.$message({
              message: '提交失败', type: 'warning'
            })
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    back() {
      this.$router.push('/console')
    },
    submitFormNext(form) {
      this.$router.push('/console')
    },
    resetForm(form) {
      this.$refs.workstationForm.resetFields()
    },
    getAreaSelect2(msg) { // msg就是传过来的数据了  这只是个形参  名字可以随意
      this.workstationForm.areaSelect1 = msg// 然后将数据赋值给chindVal
    },
    getDate() {
      find().then(response => {
        if (response.result === 0) {
          this.$message({
            message: response.msg, type: 'error'
          })
        }
        if (response.result === 1) {
          this.workstationForm = response.data
          this.workstationForm.entType = {}
          this.$set(this.workstationForm.entType, 'stationTypeCode', response.data.entTypeCode)
          this.$set(this.workstationForm.entType, 'stationTypeName', response.data.entTypeName)
          this.workstationForm.entScale = {}
          this.$set(this.workstationForm.entScale, 'scaleTypeCode', response.data.entScaleCode)
          this.$set(this.workstationForm.entScale, 'scaleTypeName', response.data.entScaleName)
          this.workstationForm.areaSelect1 = []
          this.$set(this.workstationForm.areaSelect1, 'areaCode', response.data.provCode)
          this.$set(this.workstationForm.areaSelect1, 'areaName', response.data.provName)
          this.$set(this.workstationForm.areaSelect1, 'cityCode', response.data.cityCode)
          this.$set(this.workstationForm.areaSelect1, 'cityName', response.data.cityName)
          this.$set(this.workstationForm.areaSelect1, 'distCode', response.data.distCode)
          this.$set(this.workstationForm.areaSelect1, 'distName', response.data.distName)
          // this.workstationForm.entType = response.data.entTypeName
          // this.workstationForm.entScale = response.data.entScaleName
          if (this.workstationForm.industryFourthCode.substring(this.workstationForm.industryFourthCode.length - 1) === '0') {
            this.workstationForm.industry = [this.workstationForm.industryCode, this.workstationForm.industrySecondCode, this.workstationForm.industryThreeCode]
            this.workstationForm.industry1 = [this.workstationForm.industryCode, this.workstationForm.industrySecondCode, this.workstationForm.industryThreeCode]
          } else {
            this.workstationForm.industry = [this.workstationForm.industryCode, this.workstationForm.industrySecondCode, this.workstationForm.industryThreeCode, this.workstationForm.industryFourthCode]
            this.workstationForm.industry1 = [this.workstationForm.industryCode, this.workstationForm.industrySecondCode, this.workstationForm.industryThreeCode, this.workstationForm.industryFourthCode]
          }
        }
      })
    },
    getTeacherId(val) {
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },
    handleInput2(e) {
      // 通过正则过滤小数点后6位
      e.target.value = (e.target.value.match(/^\d*(\.?\d{0,5})/g)[0]) || null
    },
    replaceNum(val) { this.workstationForm.operationLife = val.replace(/\D/g, '') },
    replaceNum1(val) { this.workstationForm.entNumber = val.replace(/\D/g, '') }
  }
}
</script>
<style>
</style>
<style scoped>
.title2 {
  line-height: 40px;
  font-size: 20px;
  color: darkgray;
  border-bottom: 1px #cccccc solid;
  margin-bottom: 20px;
}
</style>
<style>
.entInfo .el-form-item__label{
  /*width: 140px !important;*/
  text-align: left !important;
  background: #409eff;
  color: #ffffff;
  padding-left: 10px;
}
.entInfo .el220 .el-input{
  width: 260px !important;
}
.xjr .el-form-item__label{
  width: 400px!important;
  text-align: left !important;
  background: #409eff;
  color: #ffffff;
  padding-left: 10px;
  margin-right: 30px;
}
.shangxia1 {
  /*position: fixed;*/
  /*bottom: 0;*/
  margin: auto;
  /*width: 1000px;*/
}
.shangxia1 .el-form-item__content{
  margin: auto !important;
  width: 370px;
  text-align: center;
}
.entInfo .el-step.is-simple:not(:last-of-type) .el-step__title {
  max-width: 85%;
  word-break: break-all;
}
.entInfo input[type="number"] {
  -moz-appearance: textfield !important;
}
.entInfo input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none!important;
}
</style>
